<template>
	<view>
		<view class="centre-fixed" style="position: fixed;z-index: 2;background-color: #DCE1F5;width: 100%;">
			<view class="centre-top row" :style="`padding-top:${heightTop}rpx`">
				<view class="row"
					style="justify-content: space-between;align-items: center;width: 100%;padding: 0rpx 30rpx;">
					<zywork-icon @click="navigateBack" type="icon-zuojiantou" color="#ffffff" size="50"></zywork-icon>
				</view>
			</view>
		</view>
		<text class=""
			style="position: absolute;left: 50%;transform: translate(-50%, 0%);color: #eaeaea;z-index: 10;font-size: 46rpx;"
			:style="`top:${height-130}rpx`">
			云豆收益
		</text>
		<view class="row align-items-center" @click="navTo('/pages/index/make-money/earnings')"
			style="width: 100%;position: relative;z-index: 10;" :style="`top:${height-20}rpx`">
			<text style="font-size: 70rpx;color: #FFFFFF;">{{userInfo.totalPoints}}</text>
			<image src="/static/coins@3x.png" style="width: 40rpx;height: 40rpx;padding: 0rpx 5rpx;" mode=""></image>
			<zywork-icon type="icon-youjiantou" color="#ffffff" size="40"></zywork-icon>
			<view class=""
				style="padding: 5rpx 20rpx;color: #60c2ff;background-color: #FFFFFF;border-radius: 50rpx;font-size: 26rpx;">
				去兑换
			</view>
		</view>
		<view class="centre-top1 row" :style="`padding-top:${height}rpx`"
			style="justify-content: space-around;z-index: 1;">
			<view class="container" style="width: 100%;">
				<view class="row list-item" v-if="integralRule.length>6&&integralRule[6].itemValue>0"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">每日签到</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text  style="color: #3897ce;">+{{integralRule[6].itemValue}}</text>
						</view>
						<text style="font-size: 32rpx;color: #9F9F9F;margin-top: 10rpx;">每天签到,每天领云豆</text>
					</view>
					<view v-if="!isSignIn" @click.stop="startSignIn" class="button-active" style="">
						签到
					</view>
					<view v-else class="button">
						已完成
					</view>
				</view>
				<view v-if="!isAndroid&&!userInfo.phonenumber&&integralRule.length>3&&integralRule[3].itemValue>0"  class="row list-item"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column" style="width: 100%;">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">绑定手机号</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text style="color: #3897ce;">+{{integralRule[3].itemValue}}</text>
						</view>
						<view class="row" style="align-items: center;">
							<text style="font-size: 32rpx;color: #9F9F9F;margin-top: 10rpx;width: 450rpx;">新用户绑定手机号得云豆</text>
							<view v-if="userInfo.loginType&&userInfo.loginType === 'apple'" class="button-active" @click="navTo('/pages/login/binding-phone/binding-phone?type='+userInfo.loginType)" style="">
								去绑定
							</view>
							<view v-if="userInfo.loginType&&userInfo.loginType === 'wx'" class="button-active" @click="navTo('/pages/user/my-setting/update-Phone/update-Phone')" style="">
								去绑定
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="integralRule.length>4&&integralRule[4].itemValue>0" class="row list-item"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column" style="width: 100%;">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">限时领云豆</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text style="color: #3897ce;">+{{integralRule[4].itemValue}}</text>
						</view>
						<view class="row" style="align-items: center;">
							<text style="font-size: 32rpx;color: #9F9F9F;margin-top: 10rpx;width: 450rpx;">每天完成10次任务，可赚{{integralRule[4].itemValue}}云豆</text>
							<view class="button-active" @click="showRewardedVideoAd" style="">
								领云豆
							</view>
						</view>
					</view>
				</view>
				
				<!-- <view v-if="isAndroid&&integralRule.length>2&&integralRule[2].itemValue>0"  class="row list-item"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column" style="width: 100%;">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">看视频得奖励</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text style="color: #3897ce;">+{{integralRule[2].itemValue}}</text>
						</view>
						<view class="row" style="align-items: center;">
							<text style="font-size: 32rpx;color: #3897ce;margin-top: 10rpx;">当前观看时长({{parseInt(watchTheTime/60)}}/300)分钟</text>
							<view class="button-active" @click="navTo('/pages/index/video-ks/video-ks')">
								立即观看
							</view>
						</view>
						<view class="row" style="align-items: center;margin-top: 20rpx;">
							<text style="font-size: 32rpx;color: #CF606F;margin-top: 10rpx;">当前已累计+{{(parseInt(watchTheTime/60)*this.proportion).toFixed(1)}}云豆奖励</text>
							<view v-if="ksdspStatus&&!ksdspStatus.status&&watchTheTime>=600" @click.stop="$refs.alertDialog.open()" class="button-active" style="">
								领取
							</view>
							<view v-else-if="ksdspStatus&&ksdspStatus.status" class="button">
								已领取
							</view>
							<view v-else-if="watchTheTime<600" class="button">
								领取
							</view>
						</view>
					</view>
				</view> -->
				
				<view v-if="integralRule.length>1&&integralRule[1].itemValue>0"  class="row list-item" @click="getRewards(h5Status,2)"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">免费小说</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text style="color: #3897ce;">+{{integralRule[1].itemValue}}</text>
						</view>
						<text style="font-size: 32rpx;color: #9F9F9F;margin-top: 10rpx;width: 450rpx;">观看看小说30秒得奖励</text>
					</view>
					<view   :class="!h5Status.status?'button-active':'button'" style="">
						{{!h5Status.status?'观看':'已领取'}}
					</view>
				</view>
				<view v-if="integralRule.length>0&&integralRule[0].itemValue>0"  class="row list-item" @click="getRewards(newsStatus,3)"
					style="background-color: #FFFFFF;border-radius: 35rpx;padding: 50rpx 30rpx;">
					<view class="column">
						<view class="row" style="align-items: center;">
							<text style="font-size: 46rpx;">浏览资讯</text>
							<text style="font-size: 32rpx;color: #CF606F;margin-left: 10rpx;">最高奖励</text>
							<image src="/static/coins@3x.png" mode=""></image>
							<text style="color: #3897ce;">+{{integralRule[0].itemValue}}</text>
						</view>
						<text style="font-size: 32rpx;color: #9F9F9F;margin-top: 10rpx;width: 450rpx;">浏览资讯30秒得奖励</text>
					</view>
					<view   :class="!newsStatus.status?'button-active':'button'" style="">
						{{!newsStatus.status?'浏览':'已领取'}}
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="sign-in column" style="">
				<view class="" style="text-align: center;color: #FFFFFF;margin-top: 190rpx;font-size: 40rpx;">
					今日签到
				</view>
				<view class=""
					style="text-align: center;color: #FFF3DB;margin-top: 90rpx;font-size: 60rpx;margin-left: 30rpx;">
					恭喜您签到成功！
				</view>
				<view class="" style="text-align: center;color: #FFD45D;margin-top: 20rpx;font-size: 60rpx;">
					+{{signInDate.intregral}}云豆
				</view>
				<view class="" style="text-align: center;color: #FFD45D;margin-top: 20rpx;font-size: 60rpx;">
					+{{signInDate.levelValue}}正能量
				</view>
				<view class="sign-button" @click="showRewardedVideoAd">
					领取更多云豆
				</view>
			</view>
			<view class=""
				style="width: 80rpx;height: 80rpx;position: relative;top: 40rpx;left: 50%;transform: translate(-50%, 0%);"
				@click="$refs.popup.close()">
				<zywork-icon type="icon-guanbi1" color="#fff" size="80"></zywork-icon>
			</view>
			<!-- <image style="width: 670rpx;" src="/static/popup.png" mode="widthFix"></image> -->
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" title="提示" content="此奖励每天只能领取一次,是否确定领取" :buttonArr="['取消','确定']"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import AD from "@/common/advertising.js"
	import akicryptojs from '@/uni_modules/aki-cryptojs/js_sdk/aki-cryptojs'
	export default {
		data() {
			return {
				heightTop: 15,
				height: 180,
				signInDate: "",
				isSignIn: false,
				userInfo: "",
				adpid: 1281678491,
				ksdspStatus:{
					"code": "ksdsp",
					"status": 0
				},
				h5Status:{
					"code": "h5",
					"status": 0
				},
				newsStatus:{
					"code": "news",
					"status": 0
				},
				getStatus:false,
				isAndroid:true,
				watchTheTime: 0, //快手视频计时
				loading: false,
				timeVideo: null,
				adOptions:{
					adpid: 1027948601
				},
				dayTime:null,
				// 倒计时的时间
				time: 60,
				// 位置
				tipTop: 100,
				// 是否显示倒计时组件
				isShow: false,
				// 文字内容
				template: '继续浏览商品{{time}}秒可领取蜜獾收益+56',
				integralRule:[],
				ksProportion:2,
				videoCount:0
			};
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.heightTop += this.statusBarHeight
			this.height += this.heightTop
			setTimeout(() => {
				this.$nextTick(() => {
					var query = uni.createSelectorQuery().in(this);
					query.select('.centre-fixed').boundingClientRect();
					query.exec(data => {
						this.height += data[0].height
					});
				})
			}, 100)
			console.log("加载广告位",this.adpid)
		},
		onShow() {
			this.querySignInState();
			this.queryState();
			this.getUserInfo();
			this.getIntegralRule();
			this.$util.accessPage(1)
			console.log("苹果不运行",getApp().globalData.isAndroid)
			this.isAndroid = getApp().globalData.isAndroid;
			if (this.videoCount===0) {
				this.videoCount = uni.getStorageSync("video_" + this.$util.getTime().split(" ")[0]);
			}
			if (this.timeVideo) {
				clearInterval(this.timeVideo);
				this.timeVideo = null;
			}
			let interaval =setInterval(()=>{
				this.time --
				if(this.time==0){
					clearInterval(interaval);
				}
			},1000)
		},
		onReady() {
			
		},
		methods: {
			getAdverTCount(imei){
				this.$util.doPostForm("/adcpd/getAdverTCount", {imei:imei}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.adverTCount = res.data.data
						this.videoCount = this.adverTCount.equipCount;
						uni.setStorageSync("video_" + this.$util.getTime().split(" ")[0], this.videoCount)
						console.log("观看广告次数",this.adverTCount)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 查询积分获取值
			getIntegralRule(){
				this.$util.doGet("/dict/getDictItemList?dictId=14&page=1&pageSize=100", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.integralRule = res.data.data.list 
						console.log(this.integralRule)
						if(this.integralRule.length>2&&this.integralRule[2].itemValue>0){
							this.integralRule[2].itemValue = parseInt(this.integralRule[2].itemValue)
							this.proportion = parseFloat(this.integralRule[2].itemValue/300)
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			dialogConfirm() {
				this.getRewards(this.ksdspStatus,1)
			},
			dialogClose() {},
			showAd() {
				if (this.loading) {
					return;
				}
				// uni.setStorageSync(this.dayTime,3600)
				this.loading = true;
				plus.ad.showContentPage(this.adOptions, (res) => {
					this.loading = false;
					this.timeVideo = setInterval(() => {
						this.watchTheTime++
						if (this.watchTheTime != 0 && this.watchTheTime % 60 == 0) {
							console.log(this.watchTheTime)
							uni.setStorageSync(this.dayTime, this.watchTheTime)
						}
					}, 1000)
				}, (err) => {
					this.loading = false;
					console.log(err);
				});
			},
			getH5Award(data,status){
				let that = this
				let name = 'getAward'
				if(this.$environment === 'dev'){
					name = 'ceshi-getAward'
				}
				uniCloud.callFunction({
					name: name,
					data: data,
					success(res) {
						console.log("请求完成", res)
						let result = res.result
						console.log(result.isValid)
						setTimeout(()=>{
							that.getStatus = false
						},2000)
						if(result.isValid){
							status.status = 1
							that.$util.showInfoToast("领取奖励成功")
							that.getUserInfo();
						}else {
							that.$util.showInfoToast(result.message)
						}
					},
					fail() {},
					complete() {}
				})
			},
			//领取奖励
			getRewards(status,type){
				let transId = new Date().getTime() + "";
				let time = null
				
				if(status.code === 'ksdsp'){
					if(status.status){
						return
					}
					time = this.watchTheTime;
				}else if (status.code === 'h5'){
					uni.setStorageSync("weburl",{url:'https://h5.haizhlink.com/?aid=UWAGCFN8',code:"h5"})
					uni.navigateTo({
						url:"/pages/index/make-money/fiction"
					})
					return
				}else if (status.code === 'news'){
					uni.setStorageSync("weburl",{url:'https://h5.haizhlink.com/?aid=UQAV5RTY',code:"news"})
					uni.navigateTo({
						url:"/pages/index/make-money/fiction"
					})
					return
				}
				let sign = akicryptojs.EncryptHmacSHA256(transId, this.$util.APPID)
				// if(status.code =='h5'){
				// 	sign = akicryptojs.EncryptHmacSHA256(transId, this.$util.APPID)
				// }
				if(this.getStatus){
					return
				}
				this.getStatus = true
				let data = {
					extra: 'APP',
					adpid: 1027948601,
					transId: transId,
					time:time,
					sign: sign,
					type:type,
					rcode:this.userInfo.rcode,
					provider: status.code,
					platform: uni.getSystemInfoSync().platform,
					toKen: uni.getStorageSync(this.$util.USER_TOKEN_KEY)
				}
				console.log("领取激励奖励")
				this.getH5Award(data,status);
			},
			//查询奖励领取状态
			queryState() {
				this.$util.doGet("/adcpd/getAdvertStatus", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						res.data.data.forEach(item =>{
							item.status = parseInt(item.status)
							if(item.code =='news'){
								this.newsStatus = item
							}else if (item.code =='h5'){
								this.h5Status = item
							}else if (item.code == 'ksdsp'){
								this.ksdspStatus = item
							}
						})
						this.statusResult = res.data.data
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//查询是否签到过
			querySignInState() {
				this.$util.doGet("/signIn/checkUserDailySign", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						if (res.data.data == 1) {
							this.isSignIn = true
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			showRewardedVideoAd() {
				// 调用后会显示 loading 界面
				if(this.videoCount >=20){
					this.$util.showInfoToast("一台手机每天只能领取20次视频奖励")
					return
				}
				let time = new Date().getTime() + "";
				let transId = ""
				let options = {
					adpid: this.adpid, // HBuilder 基座测试广告位
					adType: "RewardedVideo",
					urlCallback: {
						userId: '',
						extra: 'testdata'
					}
				}
				let ad = AD.get(options)
				AD.show(options, (res) => {
					// 用户点击了【关闭广告】按钮
					transId = new Date().getTime() + "";
					if (res && res.isEnded) {
						// 正常播放结束
						if(transId){
							let data = {
								extra: 'APP',
								adpid: this.adpid,
								transId: transId,//播放时间结束毫秒值
								time:time,
								imei:uni.getStorageSync(this.$util.UUID),
								rcode:this.userInfo.rcode,
								sign: akicryptojs.EncryptHmacSHA256(transId, this.$util.APPID),
								provider: res.provider,
								platform: uni.getSystemInfoSync().platform,
								toKen: uni.getStorageSync(this.$util.USER_TOKEN_KEY)
							}
							console.log("领取激励奖励")
							this.callFunction(data);
						}
					} else {
						// 播放中途退出
						console.log("onClose " + res.isEnded);
					}
				}, (err) => {
					// 广告加载错误
					console.log(err)
				})
				
				// ad.getAd().onVerify && ad.getAd().onVerify((res) => {
				//   transId = new Date().getTime() + "";
				//   console.log("看完了",transId)
				// })
				
			},
			//领取激励视频奖励
			callFunction(data) {
				let that = this
				let name = 'uni-ad'
				if(this.$environment === 'dev'){
					name = 'ceshi-uni-ad'
				}
				uniCloud.callFunction({
					name: name,
					data: data,
					success(res) {
						console.log("请求完成", res)
						let result = res.result
						console.log(result.isValid)
						if(result.isValid){
							that.$util.showInfoToast("领取成功")
							that.videoCount++
							uni.setStorageSync("video_" + that.$util.getTime().split(" ")[0], that.videoCount)
						}else {
							that.$util.showInfoToast(result.message)
						}
					},
					fail() {},
					complete() {}
				})
			},
			getUserInfo() {
				console.log("获取个人信息")
				this.$util.doGet('/user/manager/userInfoList', {}, {}, true).then(res => {
					console.log(res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						this.getAdverTCount(uni.getStorageSync(this.$util.UUID));
						this.userInfo = res.data.data
						uni.setStorageSync(this.$util.USER_INFO, res.data.data)
						let dayTime = "user_"+this.userInfo.rcode+'_1'+this.$util.getTime().split(" ")[0]
						this.dayTime = dayTime
						if(uni.getStorageSync(this.dayTime)){
							this.watchTheTime = uni.getStorageSync(this.dayTime)
						}else {
							this.watchTheTime = 0
						}
						this.$forceUpdate()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//开始签到
			startSignIn() {
				if (this.isSignIn) {
					return
				}
				this.isSignIn = true
				this.$util.doPostJson("/signIn/saveSignInIntegral", {
					type: 1
				}, {}, true).then(res => {
					console.log(res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						this.$refs.popup.open()
						this.signInDate = res.data.data
						this.userInfo.totalPoints += this.signInDate.intregral
					} else {
						this.isSignIn = false
					}
				}).catch(error => {
					console.log(error)
					this.isSignIn = false
				})
			},
			logoTime(e) {
				console.log(e)
			},
			navigateBack() {
				uni.navigateBack({})
			},
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #DCE1F5;
	}

	.row {}

	.sign-in {
		background-image: url('~@/static/popup.png');
		width: 700rpx;
		background-size: 100% 100%;
		height: 830rpx;
		position: relative;

		.sign-button {
			width: 500rpx;
			text-align: center;
			padding: 20rpx 0rpx;
			background: linear-gradient(to right, #FEEA9F, #F9D376, #F5C164);
			font-size: 40rpx;
			color: #C23916;
			border-radius: 60rpx;
			margin: 50rpx auto;
			font-weight: 800;
		}
	}

	.view-active {
		background-color: rgba($color: #000000, $alpha: 0.1);
	}

	.list-item {
		align-items: center;
		padding: 0rpx 35rpx;
		margin: 50rpx 0rpx;
	}

	.button-active {
		padding: 10rpx 30rpx;
		background-color: #57B1FD;
		color: #FFFFFF;
		border-radius: 60rpx;
		font-size: 34rpx;
		margin-left: auto;
	}

	.button {
		padding: 10rpx 30rpx;
		background-color: #CDCDCD;
		color: #FFFFFF;
		border-radius: 60rpx;
		font-size: 34rpx;
		margin-left: auto;
	}

	.container-top {
		align-items: center;
		width: 620rpx;
		border-radius: 60rpx;
		background-color: #FFFFFF;
		padding: 30rpx 35rpx;
		height: 50rpx;
	}

	.centre-top {
		width: 100%;
		background-color: $index-bg-top;
		height: 110rpx;
		top: 0rpx;
		// padding-top: ;
	}

	.centre-top1 {
		width: 100%;
		position: relative;
		z-index: 5;
		overflow: hidden;
		padding-bottom: 300rpx;
	}

	.centre-top1:after {
		content: '';
		width: 120%;
		height: 480rpx;
		position: absolute;
		left: -10%;
		top: 0;
		z-index: -11;
		border-radius: 0 0 60% 60%;
		background: $index-bg-top;
	}

	.container {
		padding: 20rpx 35rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			padding: 0rpx 5rpx;
			border-radius: 50%;
		}
	}

	.container-title {
		font-size: 40rpx;

		view {
			width: 10rpx;
			height: 40rpx;
			text-align: center;
			background-color: $index-bg-top;
			margin-right: 30rpx;
		}

		text {
			font-size: 40rpx;
		}
	}
</style>
